<script setup>
import { onMounted, ref, reactive, watch } from 'vue'
import axios from 'axios'
import userObj from './user.ts'
import cityNameJsonData from '@/assets/cityname_cn.json'
import { useShopData } from '@/store/screen'

const gitCity = useShopData()
// 接收天气数据
let weatherObj = reactive({ obj: '' })
// 切换城市菜单显示隐藏
let isPopup = ref(false)
// 输入input城市名的值
let inputCityVal = ''

// 请求城市天气
const getCityWeatherFn = (cityId) => {
  let weatherUrl =
    'https://www.yiketianqi.com/free/day?appid=' +
    userObj.id +
    '&appsecret=' +
    userObj.secret +
    '&cityid=' +
    cityId
  axios.get(weatherUrl).then((d) => {
    console.log(d.data)
    weatherObj.obj = d.data
  })
}
// 实时时间
let currentTime = ref([])
let currentData = ref([])
const getTime = () => {
  const today = new Date()
  let date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
  let time = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds()
  currentTime.value = time
  currentData.value = date
}

setInterval(() => {
  // let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
  getTime()
}, 1000)

// 筛选城市，cityNameJsonData
const filterCityFn = (n) => {
  // n = gitCity.cityWeather
  // n = "上海"
  console.log('状态机', n)

  // 精确过滤城市名对应的json对象
  let result = cityNameJsonData.filter((obj) => {
    return obj.cityZh == n
  })
  console.log(result, result[0].id)
  // console.log(result, result[0].id)
  // 根据城市名，获得城市id
  getCityWeatherFn(result[0].id)
}

watch(
  () => gitCity.cityWeather,
  (nav) => {
    filterCityFn(nav)
  }
)

onMounted(() => {
  // 首次打开页面。城市id，重庆：101040100
  getCityWeatherFn(101040100)

  // 监听键盘enter按钮
  document.addEventListener('keyup', (e) => {
    console.log(e.code)
    if (e.code == 'Enter') {
      //回车执行，输入城市确认按钮
      confirmBtnFn()
    }
  })
})
</script>

<template>
  <div class="watherMain">
    <ul>
      <li class="li_1">
        <b class="cityName">
          <span style="color: #fff;">当前城市:</span>
          {{ weatherObj.obj.city }}</b>
      </li>
      <li class="li_2">{{ weatherObj.obj.update_time }}更新</li>
      <li class="li_3">
        {{ weatherObj.obj.tem_day }}
        <em class="li_7">℃</em>
      </li>
      <li class="li_4">空气质量 {{ weatherObj.obj.air }}</li>
      <li class="li_5">{{ weatherObj.obj.win }} {{ weatherObj.obj.win_speed }}</li>
      <li class="li_6">相对温度 {{ weatherObj.obj.humidity }}</li>
      <div class="currentTime flex justify-around">
        <p class="currentDat">日期：{{ currentData }}</p>
        <p class="currentSc">{{ currentTime }}</p>
      </div>
    </ul>
  </div>
</template>

<style scoped lang="scss">
div.watherMain {
  width: 100%;
  height: 100%;

  /* background: #eee; */
  /* border: .1rem solid #8f8f8f; */
  // border-radius: 1rem;
  position: relative;
  font-size: 1.2rem;
  overflow: hidden;
}

div.watherMain li {
  position: absolute;
}

div.watherMain li.li_1 {
  top: 1rem;
  left: 1rem;
}

div.watherMain li.li_2 {
  top: 1rem;
  left: 18rem;
}

div.watherMain li.li_3 {
  top: 6rem;
  left: 3rem;
  font-size: 6.6rem;
}

div.watherMain li.li_4 {
  top: 4.5rem;
  left: 18rem;
  background: rgb(248, 208, 97);
  padding: 0 2rem;
  border-radius: 1.5rem;
}

div.watherMain li.li_5 {
  top: 8rem;
  left: 19rem;
}

div.watherMain li.li_6 {
  top: 10rem;
  left: 19rem;
}

div.watherMain em.li_7 {
  position: relative;
  top: -2.7rem;
  left: -1.5rem;
  font-size: 2rem;
  font-weight: bold;
}

.cityName {
  color: aqua;
  font-size: 2.4rem;
}

.currentTime {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: 100%;
  height: 5rem;

  .currentDat {
    font-size: 2rem;
  }

  .currentSc {
    font-size: 3rem;
    text-align: center;
    color: aquamarine;
  }
}
</style>
